<template>
	<div class="goods">
		<div v-for="item in shujv_goods" :key="item.id">
			<img @click="product(item)" :src="item.small_image" alt="加载失败">
			<h3>{{item.name}}</h3>
			<div>
				<span>{{item.price | priceFilter}}</span>
				<del>{{item.origin_price | priceFilter}}</del>
				<div @click="add(item)">
					<van-icon name="cart-o" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {addCartApi} from '@/api'
	import {mapMutations,mapState} from 'vuex'
	export default {
		name:'goods',
		props:["shujv_goods"],
		methods:{
			...mapMutations(['addgoods']),
			async add(goods){
				let {id:goods_id,name:goods_name,price:goods_price,small_image} = goods
				let {token:user_id} = this.isDenglu
				// 拿到数据将其结构给新对象，使新对象用其作为自己的参数发送ajax并返回一个res对象，证明已经添加到服务器中成功，然后res返回的对象中有这些商品的信息，再将商品的信息给同步到本地
				let goodss = {goods_id, goods_name, goods_price, small_image, user_id}
				let res = await addCartApi(goodss)
				//将商品信息同步到本地
				this.addgoods(res.data.data)
			},
			product(goods){
				this.$router.push({name:"product",query:{goods}})
			}
		},
		computed:{
			...mapState(['isDenglu']),
		},
	}
</script>

<style scoped lang="less">
	.goods{
		display: flex;
		flex-wrap: wrap;
		div{
			box-sizing: border-box;
			width: 50%;
			padding: 20px;
			img{
				width: 100%;
			}
			h3{
				font-size: 14px;
				color: #000;
				height: 40px;
				margin: 0px;
				overflow: hidden;
				// text-overflow: ellipsis;
			}
			div{
				width: 100%;
				padding: 0;
				span{
					font-size: 12px;
					color: #fe7a63;
				}
				del{
					margin-left: 5px;
					font-size: 12px;
					color: #b2b2b2;
				}
				div{
					float: right;
					width: 30px;
					height: 30px;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #3eb965;
					border-radius: 15px;
					font-size: 18px;
					color: #fff;
				}
			}
		}
	}
</style>